/**
 * Created by ren on 10/04/2017.
 */
import React, {Component} from 'react';
import {
  StyleSheet,
  Platform,
  Image,
  Dimensions,
  StatusBar,
  TouchableWithoutFeedback
}from 'react-native';
import {Container, Content, Text, List, ListItem, Left, Icon, Body, Right, Button, Header, Title} from 'native-base'
import {getSize} from '../../utils/response'
import PageUtil from '../../utils/PageUtil'
import * as api from '../../utils/api'
import * as NetService from '../../utils/netservice'
export default class Bank extends Component {
  constructor(props, context) {
    super(props, context);
    this.PageUtil = new PageUtil()
    this.state = {
      bankAddr: "",
      bankAccountName: '',
      bankAcount: '',
      bankName: '',
    }
  }

  componentDidMount() {
    this.getBusBankInfo()
  }

  getBusBankInfo() {
    NetService.get(api.getBusBankInfo)
      .then(response => {
        if(response){
          this.setState({
            bankAddr: response.bankAddr,
            bankAccountName: response.bankAccountName,
            bankAcount: response.bankAcount,
            bankName: response.bankName,
          })
        }
      })
  }

  render() {
    return (
      <Container style={{backgroundColor:'#F4F4F4'}}>
        <Header iosBarStyle="light-content" backgroundColor="#16BD42"
                style={{backgroundColor:'#16BD42',height:Platform.OS==='ios'?getSize(64):getSize(50),borderBottomWidth:0,marginBottom:getSize(7)}}>
          <StatusBar
            backgroundColor={'#303135'}
          />
          <Left style={{flex:1}}>
            <Button transparent onPress={this.PageUtil.pop}>
              <Icon name='arrow-back' style={{fontSize:getSize(24),color:'white'}}/>
            </Button>
          </Left>
          <Body style={{alignItems:'center'}}>
          <Title style={{color:'white',fontSize:getSize(19)}}>我的银行卡</Title>
          </Body>
          <Right style={{flex:1}}>
            <Button transparent>
            </Button>
          </Right>
        </Header>
        <Content>
          <List style={{backgroundColor:'white'}}>
            <ListItem>
              <Left>
                <Text style={styles.text}>开户行</Text>
              </Left>
              <Body />
              <Right style={styles.rightBtn}>
                <Text note style={styles.rightBtnText}>{this.state.bankName}</Text>
              </Right>
            </ListItem>
            <ListItem>
              <Left>
                <Text style={styles.text}>持卡人姓名</Text>
              </Left>
              <Body />
              <Right style={styles.rightBtn}>
                <Text note style={styles.rightBtnText}>{this.state.bankAccountName}</Text>
              </Right>
            </ListItem>
            <ListItem style={{borderBottomWidth:getSize(10),borderBottomColor:'#F4F4F4'}} last>
              <Left>
                <Text style={styles.text}>开户行所在地</Text>
              </Left>
              <Right style={styles.rightBtn}>
                <Text note style={styles.rightBtnText}>{this.state.bankAddr}</Text>
              </Right>
            </ListItem>
            <ListItem last>
              <Left>
                <Text style={styles.text}>银行卡号</Text>
              </Left>
              <Right style={styles.rightBtn}>
                <Text note style={styles.rightBtnText}>{this.state.bankAcount}</Text>
              </Right>
            </ListItem>
          </List>
        </Content>
      </Container>
    )
  }
}
const styles = {
  text: {
    color: '#696969',
    fontSize: getSize(16)
  },
  rightBtn: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-end'
  },
  rightBtnText: {
    marginRight: getSize(10)
  }
}